import React from 'react'
// import { Toast } from 'antd-mobile'
import './index.less'
// import { post } from '../../utils'
import { urlArgs } from '../My/methods'
export default class CategoryList extends React.Component<any, any> {

    public state = {
        title: this.props.title,
        recommend: '',
        tabsIndex: this.props.categorySecondIndex,
        callBack: this.props.getChildData
    }
    public componentDidMount() {
        const obj: any = urlArgs()
        const defaultIndex = this.props.categorySecondIndex || 0
        const id = obj.id || defaultIndex
        const { title } = this.props
        let i: any
        title.map((item: any, index: number) => {
            if (item.id === parseInt(id, 10)) {
                i = index
            }
        })
        if (i !== undefined) {
            this.handleTabItemClick(i, this.state.title[i])
            this.setView(i)
        } else {
            this.handleTabItemClick(defaultIndex, this.state.title[defaultIndex])
            this.setView(defaultIndex)
        }
    }

    public render(): JSX.Element {
        const { title, tabsIndex } = this.state
        return (
            <React.Fragment>
                <div className="categoryList">
                    {
                        title.map((item: any, index: number) => {
                            return (<div key={index} id={'abc' + index} className={`categoryList_titleItem ${(index === tabsIndex) ? 'categoryList_titleItemActive' : ''}`} onClick={this.handleTabItemClick.bind(this, index, item)}>{item.name}</div>)
                        })
                    }
                </div>
            </React.Fragment>
        )
    }
    private setView = (index: any) => {
        const dom: HTMLElement | null = document.getElementById('abc' + index)
        let offsetTop: any
        // const scrollTop = document.getElementsByClassName('categoryList')[0].scrollTop
        const viewHeight = document.documentElement.clientHeight
        const allContentHei = document.getElementsByClassName('categoryList')[0].scrollHeight + 50
        if (dom) {
            offsetTop = dom.offsetTop
        }
        if (offsetTop > viewHeight) {
            if (allContentHei - offsetTop < viewHeight) {
                if (allContentHei - offsetTop > viewHeight / 2) {
                    document.getElementsByClassName('categoryList')[0].scrollTop = allContentHei - viewHeight
                    // document.getElementsByClassName('categoryList')[0].scrollTop = (allContentHei - viewHeight) * ((allContentHei - offsetTop) / 2) / (allContentHei - viewHeight)
                } else {
                    // document.getElementsByClassName('categoryList')[0].scrollTop = allContentHei - viewHeight
                }

            }
        }
    }
    private handleTabItemClick = (index: number, item: any) => {
        const { SET_DETAIL_CATEGORYTHIRDLISTINDEX } = this.props
        SET_DETAIL_CATEGORYTHIRDLISTINDEX(index)
        this.setState(
            {
                tabsIndex: index
            },
            () => {
                this.state.callBack(item)
            }
        )
        // post('goodsapi/goodsRecommend', {
        //     category_id: item.id
        // }).then((data: any) => {
        //     this.state.callBack(item, data)
        //     Toast.hide()
        // })

    }
}